<template>
    <router-link
        class="video-small-component-box"
        :to="`/ContentDisplay/VideoPlay/${videoData.id}?f=VideoLecture&code=video-lecture`"
    >
        <img class="seal-img" :src="videoData.cover" alt=""/>
        <div class="info-item">{{videoData.title || '--'}}</div>
    </router-link>
</template>

<script>
export default {
    name: "VideoSmallComponent",
    props:{
        videoData:{
            type:Object,
            default(){
                return {}
            }
        }
    }

}
</script>

<style lang="less" scoped>
@import "../../../assets/global.less";
//phone
@media only screen and (max-width: 576px){
    @width:50vw;
    @height:32vw;
    .video-small-component-box{
        .seal-img{
            width:@width;
            height:calc(@height - 5vw);
            object-fit: cover;
            box-shadow: 0 0 2px grey;
        }
        .info-item{
            width:@width;
            height:5vw;
            font-size:4vw;
            line-height:5vw;
            text-align: center;
            .line-ellipsis(1);
            color:black;
        }
    }

}

//pc
@media only screen and (min-width: 576px){
    .video-small-component-box{
        .seal-img{
            width:180px;
            height:100px;
            object-fit: cover;
            box-shadow: 0 0 2px grey;
        }
        .info-item{
            width:180px;
            height:20px;
            font-size:14px;
            line-height:20px;
            text-align: center;
            padding:0 10px;
            .line-ellipsis(1);
            color:black;
        }
    }

}
</style>